<template>
	<view class="page-box">
		<view class="flex menu-box">
			<view v-for="(item,index) in list.children" @click="handletabList(item,index)" :key="item.id"
				class="menu columnY centerXY">
				<image class="menu-icon" :src="item.cover"></image>
				<view class="color-text mar-top-10 font-26 menu-text" :class="index == tabs ? 'on':''">{{item.name}}
				</view>
			</view>
		</view>

		<view class="banner-box pad-30">
			<view class="banner-list" v-for="item in childrenList" :key="item.id" @click="hanldeServiceInfo(item)">
				<image class="banner-bg" :src="item.cover" mode=""></image>
				<view class="centerY pad-30 betweenX">
					<view>
						<view class="font-30 color-text">{{item.name}}</view>
						<view class="font-28 mar-top-10 color-error">
							<text v-if="item.min_price">￥{{item.min_price}}元</text>
							<text v-if="item.unit">/{{item.unit}} </text>
						</view>
					</view>
					<view class="button-style button-w">马上预约</view>
				</view>
			</view>
		</view>
		<suspend icon="/static/image/service.jpg"></suspend>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		workAll
	} from '@/api/index.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	// 获取页面总数据
	const list = ref([])
	// 切换详情子数据
	let childrenList = ref([])
	const getTreeList = async () => {
		let res = await workAll();
		list.value = res.data.tree.find(item => item.code == 'jiazheng');
		childrenList.value = list.value?.children[0]?.children;
	}

	const tabs = ref(0);
	const handletabList = (item, index) => {
		tabs.value = index;
		if (item?.children) {
			childrenList.value = item.children;
		}
	}

	// 跳转详情页面
	const hanldeServiceInfo = (item) => {
		uni.navigateTo({
			url: `/pages/serviceInfo/serviceInfo?id=${item.id}`
		})
	}

	onLoad(() => {
		getTreeList();
	});
</script>

<style scoped lang="scss">
	.button-w {
		width: 200rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
	}

	.banner-box {
		// background: #F4F6F8;
		margin-top: 30rpx;
	}

	.banner-list {
		border-radius: 30rpx;
		overflow: hidden;
		background: white;
		margin-bottom: 40rpx;
	}

	.banner-bg {
		display: block;
		width: 100%;
		height: 360rpx;
	}

	.menu-box {
		flex-wrap: wrap;
	}

	.menu {
		width: 187rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
	}

	.menu-text {
		padding: 8rpx 15rpx;
	}

	.menu-icon {
		width: 100rpx;
		height: 100rpx;
	}

	.on {
		background: $uni-color-primary;
		color: #fff;
		border-radius: 30rpx;
	}
</style>